<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>jQuery插件练习</title>
    <link href="../css/bootstrap-3.3.6.min.css" rel="stylesheet">
    <script src="../js/jquery-2.2.0.js"></script>
    <script src="../js/jquery.cookie-1.4.1.js"></script>

    <style>
        body {
            font-family: "微软雅黑";
            font-size: 1.6em;
            color: #02177c;
            background: #faecff;
        }
        a, .glyphicon {
            cursor: pointer;
            margin-right: 5px;
        }
        h3{
            text-align: center;
        }
        #resText, #resText2, #resText3{
            border:#666 1px solid;
            padding: 10px;
        }
        form{
            border: #f300ff inset 3px;
            padding: 10px;
            background: #d3e5ff;
        }

        textarea{
            max-width: 100%;
        }
        table{
            background-color: #c6e0ff;
            border: #f300ff inset 3px;
        }
        .odd{
            background: #d9fff6;
        }
        .even{
            background: #deffd6;
        }
        .highLight{
            color: #fffd00;
            background: #9c3a00;
        }
    </style>
</head>
<body>
<div class="container">
    <br>
    <h1>jQuery插件练习</h1>
    <hr>
    <br>
    <h3>自定义方法插件——.color()</h3>
    <div class="row" >
        <div class="col-md-6 col-md-offset-3">
            <form action="#" id="form1">
                <div class="form-group">
                    <label for="username">用户名：</label>
                    <input class="form-control" id="username" name="username" >
                </div>
                <div class="form-group">
                    <label for="password">密码：</label>
                    <input class="form-control" id="password" name="password" type="text" style="color: #0F0;">
                </div>
                <div class="form-group">
                    <label><input id="remember" type="checkbox"> 记住用户名</label>
                </div>
                <input class="btn btn-success" id="send" type="button" value="测试插件">
                <p>点击后通过自己编写的.color()方法，弹出用户名输入框的文字颜色和设置密码输入框文字颜色为红色。
            </form>
            <br><br>
            <div hidden>
                <div class="well-sm"><b>以下是提交结果:</b></div>
                <div id="resText1"></div>
            </div>
            <hr>
        </div>
    </div>
    <h3>自定义方法插件——.alterBgColor</h3>
    <div class="row">
        <div class="col-md-6 col-md-offset-3">
            <table  id="table" class="table table-bordered">
                <thead>
                <tr><th>请选择</th><th>姓 名</th><th>性 别</th><th>出生年份</th><th>家乡</th></tr>
                </thead>
                <tbody>
                <tr><td><input name="celebrity" type="checkbox" checked></td><td>贝多芬</td><td>男</td><td>1770</td><td>德国-波恩</td></tr>
                <tr><td><input name="celebrity" type="checkbox"></td><td>莫扎特</td><td>男</td><td>1756</td><td>德国-萨尔兹堡</td></tr>
                <tr><td><input name="celebrity" type="checkbox" checked></td><td>爱因斯坦</td><td>男</td><td>1879</td><td>德国-乌尔姆市</td></tr>
                <tr><td><input name="celebrity" type="checkbox"></td><td>居里夫人</td><td>女</td><td>1867</td><td>波兰-华沙</td></tr>
                <tr><td><input name="celebrity" type="checkbox"></td><td>米开朗琪罗</td><td>男</td><td>1475</td><td>意大利-佛罗伦萨</td></tr>
                <tr><td><input name="celebrity" type="checkbox"></td><td>列夫·托尔斯泰</td><td>男</td><td>1828</td><td>俄国</td></tr>
                </tbody>
            </table>
            <table  id="table2" class="table table-bordered">
                <thead>
                <tr><th>请选择</th><th>姓 名</th><th>性 别</th><th>出生年份</th><th>家乡</th></tr>
                </thead>
                <tbody>
                <tr><td><input name="celebrity" type="checkbox" checked></td><td>贝多芬</td><td>男</td><td>1770</td><td>德国-波恩</td></tr>
                <tr><td><input name="celebrity" type="checkbox"></td><td>莫扎特</td><td>男</td><td>1756</td><td>德国-萨尔兹堡</td></tr>
                <tr><td><input name="celebrity" type="checkbox" checked></td><td>爱因斯坦</td><td>男</td><td>1879</td><td>德国-乌尔姆市</td></tr>
                <tr><td><input name="celebrity" type="checkbox"></td><td>居里夫人</td><td>女</td><td>1867</td><td>波兰-华沙</td></tr>
                <tr><td><input name="celebrity" type="checkbox"></td><td>米开朗琪罗</td><td>男</td><td>1475</td><td>意大利-佛罗伦萨</td></tr>
                <tr><td><input name="celebrity" type="checkbox"></td><td>列夫·托尔斯泰</td><td>男</td><td>1828</td><td>俄国</td></tr>
                </tbody>
            </table>
        </div>
    </div>
    <div style="height: 500px"></div>
</div>
<script>
    ;(function ($){//.color()插件
        $.fn.extend({
            /*           "color":function(value){
             if(value == undefined){
             return this.css("color");
             }else{
             return this.css("color",value);
             }*/
                //可直接写成如下形式，利用了css根据参数个数选择执行的特性。
           "color":function(value){
                    return this.css("color",value);
                }
        })
    })(jQuery);

    ;(function($){//alterBgColor()插件
        $.fn.extend({
            "alterBgColor":function (options){
                options = $.extend({
                    odd: "odd",
                    even: "even",
                    selected: "selected"
                }, options);
                $("tbody tr:odd", this).addClass(options.odd);
                $("tbody tr:even", this).addClass(options.even);
                $("tbody tr:has(:checked)", this).addClass(options.selected);
                $("tbody tr",this).click(function(){
                    var isChecked = $(this).hasClass(options.selected);
                    $(this)[isChecked ? "removeClass" : "addClass"](options.selected)
                            //此处的prop若换成attr，则可能在浏览器中出现异常
                            .find(":checkbox").prop("checked",!isChecked);
                });
                return this;
            }
        })
    })(jQuery);

    $(function(){
        $("#send").click(function(){
            alert("用户名的颜色是："+$("#username").color());
            $("#password").color("#F00");
        });

        $("#table2").alterBgColor({
            selected: "highLight"
        }).find("th").color("red");

    })

</script>
<!--<div style="background: rgba(164, 255, 169, 0.34)">.</div>-->
</body>
</html>